<%--
  Created by IntelliJ IDEA.
  User: VULCAN
  Date: 2021/8/12
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
</head>
<body>


<button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    全部订单
</button>
<button onclick="getorders(0,'order_ui')" class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
    未支付订单
</button>
<button onclick="getorders(1,'order_ui1')" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
    已支付未发货订单
</button>
<button onclick="getorders(2,'order_ui2')" class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
    已完成订单
</button>
<div class="collapse" id="collapseExample" style="display: block">
    <div class="card card-body">
        <div class="page-container">
            <table class="table" id="book_table">
                <h3 align="center">全部订单</h3>
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>订单号</th>
                    <th>商品ID</th>
                    <th>用户ID</th>
                    <th>订单价格</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${pageData.list}" var="one">
                <tr id="order_ele">
                    <td>${one.id}</td>
                    <td>${one.orderNumber}</td>
                    <td>${one.goodsId}</td>
                    <td>${one.customerId}</td>
                    <td>${one.price}</td>
                    <td>${one.status}</td>
                    <td><a class="btn-success btn-sm" onclick="sendGoods(${one.id})">发货</a> <a class="btn-danger btn-sm" onclick="deleteOrder(${one.id})">删除</a></td>
                </tr>
                </tbody>
                </c:forEach>
            </table>
        </div>
    </div>
    <div>
        <button class="btn btn-outline-secondary" onclick="firstPage()">首页</button>
        <button class="btn btn-outline-secondary" onclick="previousPage()">上一页</button>
        <button class="btn btn-outline-secondary" onclick="nextPage()">下一页</button>
        <button class="btn btn-outline-secondary" onclick="lastPage()">尾页</button>
        <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-outline-secondary">当前第${pageData.currentPage}页,共${pageData.totalPage}页，共${pageData.totalSize}条数据</button>
        </div>
    </div>
</div>






<div class="collapse" id="collapseExample1">
    <div class="card card-body">
        <div class="page-container">
            <table class="table">
                <h3 align="center">未支付订单</h3>
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>订单号</th>
                    <th>商品ID</th>
                    <th>用户ID</th>
                    <th>订单价格</th>
                    <th>订单状态</th>
                </tr>
                </thead>
                <tbody id="order_ui">
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="collapse" id="collapseExample2">
    <div class="card card-body">
        <div class="page-container">
            <table class="table">
                <h3 align="center">已支付未发货订单</h3>
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>订单号</th>
                    <th>商品ID</th>
                    <th>用户ID</th>
                    <th>订单价格</th>
                    <th>订单状态</th>
                </tr>
                </thead>
                <tbody id="order_ui1">
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="collapse" id="collapseExample3">
    <div class="card card-body">
        <div class="page-container">
            <table class="table">
                <h3 align="center">已完成订单</h3>
                <thead>
                <tr>
                    <th>订单ID</th>
                    <th>订单号</th>
                    <th>商品ID</th>
                    <th>用户ID</th>
                    <th>订单价格</th>
                    <th>订单状态</th>
                </tr>
                </thead>
                <tbody id="order_ui2">
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    var pageNumber=${pageData.currentPage};
    var pageSize = ${pageData.pageSize};
    var totalPage = ${pageData.totalPage};

    function goto() {
        window.location.href =
            "${pageContext.request.contextPath}/order/getAllByPage?pageNumber="+pageNumber+"&pageSize="+pageSize;
    }
    //首页
    function firstPage(){
        if(pageNumber > 1){
            pageNumber = 1;
            //跳转页面
            goto();
        }
    }
    //上一页
    function previousPage() {
        if(pageNumber > 1){
            pageNumber--;
            goto();
        }
    }
    //下一页
    function nextPage() {
        if(pageNumber < totalPage){
            pageNumber++;
            goto()
        }
    }
    //尾页
    function lastPage() {
        if(pageNumber < totalPage){
            pageNumber = totalPage;
            goto();
        }
    }
</script>
<script>
function getorders(status,id) {
    $.ajax({
        ele:"${"#order_ele"}",
        url:"getByStatus",
        type:"post",
        dataType:"json",
        data:{
            "status":status,
        },
        success:function (data) {
            console.log(id);
            console.log($("#"+id+"")[0]);
            $("#"+id+"").empty()
            console.log(data.data[0])
            for (var i = 0; i < data.data.length; i++) {
                console.log(data.data[i].id)
                $("#"+id+"").append(
                    "<tr>" +
                    "<td>"+data.data[i].id+"</td>" +
                    "<td>"+data.data[i].orderNumber+"</td>" +
                    "<td>"+data.data[i].goodsId+"</td>" +
                    "<td>"+data.data[i].customerId+"</td>" +
                    "<td>"+data.data[i].price+"</td>" +
                    "<td>"+data.data[i].status+"</td> " +
                    "</tr>");

            }

        }


    })

}

function sendGoods(id) {
    $.ajax({
        url: "${pageContext.request.contextPath}/orders/updateStatus",
        type: "post",
        dataType: "json",
        data:{
            "id":id,
            "status":2
        },
        success:function (data) {
            console.log("成功")
            location.reload()
        }

    })
}

function deleteOrder(id) {
    if(confirm("你确定删除?")){
        $.ajax({
            url:"${pageContext.request.contextPath}/orders/deleteOrder",
            type:"post",
            dataType:"json",
            data:{
                "id":id
            },
            success:function (data) {
                location.reload()
            }
        })
    }
}
</script>
</body>
</html>
